/**
TODO: SessionID or RoomID
Pass the session id to server..
**/

define([
	"app/kinetic/kinetic-shape",
	"app/kinetic/kinetic-operation"
	], 
function (
	shape,
	operation
	) {

    return {
		container : "kinetic-edit",
    	stage : null,
		stageX : 0,
		stageY : 0,
    	stageWidth : 0,
		stageHeight : 0,
    	layer : null,
    	initialPoint : {x:0,y:0},
		shape : shape,
		operation : operation,
		creationGroup: null,
        init: function (x,y, width, height, bgSrc) {
	
			$("<div></div>").attr({'id':App.kineticEdit.container}).css({"border":"3px solid black","background-color":"white","position":"absolute","top":parseInt(y)+"px","left":parseInt(x)+"px","width":width,"height":height,"z-index":"9"}).appendTo($("#"+App.rootCanvas));
			console.log('Init Kinetic Edit Mode..');
			App.kineticEdit.stageWidth = width;
			App.kineticEdit.stageHeight = height;
			//App.kineticEdit.stageX = x;
			//App.kineticEdit.stageY = y;
			App.kineticEdit.initStage();
			App.kineticEdit.initLayer();
			App.kinetic.stage.add(App.kinetic.layer);
			//rootCanvas : 'rootContainer',
			//kineticCanvas: 'kineticCanvas',
		},
		
		initStage: function(){
			console.log('Init Kinetic Stage For Edit..');
			App.kineticEdit.stage = new Kinetic.Stage({
				container: App.kineticEdit.container,
				width: App.kineticEdit.stageWidth,
				height: App.kineticEdit.stageHeight
			});
		},
		
		enterCreationMode : function(){
			App.kineticEdit.creationGroup = new Kinetic.Group({
				draggable: false
			});
			App.kineticEdit.layer.add(App.kineticEdit.creationGroup);
			App.kineticEdit.layer.draw();
		},
		
		endCreationMode : function(shouldSave){
			console.log(shouldSave);
			if(shouldSave)
				App.kineticEdit.renderCreationGroupToImage();
			if(App.kineticEdit.creationGroup!= null)
			{
				App.kineticEdit.creationGroup.hide();
				App.kineticEdit.creationGroup = null;
			}
		},
		
		initLayer: function(){
			console.log('Init Kinetic Edit Layer For Edit..');
			App.kineticEdit.layer = new Kinetic.Layer();
			App.kineticEdit.layer.add(new Kinetic.Rect({
				x:0,
				y:0,
				width:App.kineticEdit.stageWidth,
				height:App.kineticEdit.stageHeight
			}));
			
			App.kineticEdit.layer.on("mousedown touchstart", function(e) {
				console.log("Edit Mouse Down");
				var event = e;
				App.touchStartCanvas(event);
				if(App.dragMode){
					App.isDrag = true;
					if(App.creationMode){
						App.creationStartPoint = {x:e.layerX,y:e.layerY};
						if(App.creationType=='rect')
							App.creationObject = App.kineticEdit.shape.initRectForCreation(App.creationStartPoint);
						if(App.creationType=='circle')
							App.creationObject = App.kineticEdit.shape.initCircleForCreation(App.creationStartPoint);
						if(App.creationType=='pencil')
							App.creationObject = App.kineticEdit.shape.initPencilForCreation(App.creationStartPoint);
						if(App.creationType=='line')
							App.creationObject = App.kineticEdit.shape.initLineForCreation(App.creationStartPoint);
	
						App.kineticEdit.creationGroup.add(App.creationObject);	
					}else{
						console.log("App is not in creation mode : active first to edit");
					}
				}
				App.kineticEdit.layer.draw();
			});
			
			App.kineticEdit.layer.on("mousemove touchmove", function(e) {
				var event = e;
				App.touchMoveCanvas(event);
				if(!App.dragMode){
				
				}else{
					if(App.isDrag){
						if(App.creationMode){
							var point = {x:e.layerX,y:e.layerY};
							if(App.creationType=='rect')
								App.kineticEdit.shape.settingRectOnCreation(App.creationStartPoint, point ,App.creationObject);
							if(App.creationType=='circle')
								App.kineticEdit.shape.settingCircleOnCreation(App.creationStartPoint, point ,App.creationObject);
							if(App.creationType=='pencil')
								App.kineticEdit.shape.settingPencilOnCreation(point ,App.creationObject);
							if(App.creationType=='line')
								App.kineticEdit.shape.settingLineOnCreation(point ,App.creationObject);
								
							App.kineticEdit.layer.draw();
						}
					}
				}
			});
			
			App.kineticEdit.layer.on("mouseup touchend", function(e) {
				if(App.dragMode){
					App.isDrag = false;
					App.kineticEdit.layer.draw();
				}
				
			});
			
			$(App.kineticEdit.stage.getContainer()).click(function(e){
				if(App.dragMode){
					App.isDrag = false;
					App.kineticEdit.layer.draw();
				}
			});
		},
		
		
		renderCreationGroupToImage : function(){
			App.kineticEdit.operation.renderGroupToImage(App.kineticEdit.creationGroup);
		}
	}
});